<template>
  <div class="content-table">
    <div class="head">
      实时概况
    </div>
    <div class="overview-table">
      <ul class="thead borders">
        <li v-for="(item, index) in sales" :key="index">
          <label>{{ item.up }}{{ item.title }}</label>
          <p>
            <span>{{ item.today }}</span>
          </p>
          <div>{{ item.down }}：{{ item.yesterday }}</div>
        </li>
      </ul>
      <ul class="theadT">
        <li v-for="(item, index) in manage" :key="index">
          <div class="imgs">
            <img :src="item.img" width="100%" height="100%" />
          </div>

          <div
            class="types"
            :style="`background:${item.background};color:${item.color};`"
          >
            {{ item.type }}
          </div>
          <div class="font">
            您的订单还有<span :style="`color:${item.color};`"
              >{{ item.num }}件</span
            >还{{ item.type }}
          </div>
          <div class="btn">
            <el-button
              type="text"
              style="padding: 0;"
              @click="jupm(item.status)"
              >去看看</el-button
            >
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { DATASTATISTICS, COUNTMEWS, COUNTMEWS_MONTH, ORDER } from "../service";
export default {
  data() {
    return {
      sales: [
        {
          title: "销售额",
          today: 0,
          yesterday: 0,
          up: "今日",
          down: "昨日"
        },
        {
          title: "访问量",
          today: 0,
          yesterday: 0,
          up: "昨日",
          down: "上月"
        },
        {
          title: "用户量",
          today: 0,
          yesterday: 0,
          up: "今日",
          down: "昨日"
        },
        {
          title: "客户量",
          today: 0,
          yesterday: 0,
          up: "今日",
          down: "昨日"
        }
      ],
      manage: [
        {
          img: "https://oss.ztwlxx.cn/Group-4.svg",
          type: "待处理",
          num: 0,
          status: "",
          color: "#FA8584",
          background: "#FFF0F0"
        },
        {
          img: "https://oss.ztwlxx.cn/Group-3.svg",
          type: "待发货",
          num: 0,
          status: 1,
          color: "#5CAFFF",
          background: "#DEEFFF"
        },
        {
          img: "https://oss.ztwlxx.cn/Group-2.svg",
          type: "待付款",
          num: 0,
          status: 0,
          color: "#FFBD56",
          background: "#FFF4C7"
        },
        {
          img: "https://oss.ztwlxx.cn/Group-1.svg",
          type: "待收货",
          num: 0,
          status: 3,
          color: "#4FD2AA",
          background: "#E2FFF6"
        }
      ]
    };
  },
  created() {
    // var myDate = new Date();
    // var mytimes = myDate.toLocaleTimeString();
    // this.mytime = mytimes.substring(0, 2);
    this.init();
  },
  methods: {
    async init() {
      await ORDER().then(({ code, data }) => {
        if (code === 200) {
          if (data) {
            this.manage[0].num = data.waitrefund;
            this.manage[1].num = data.waitsend;
            this.manage[2].num = data.waitpay;
            this.manage[3].num = data.waitrecieve;
          }
        }
      });
      await DATASTATISTICS().then(({ code, data }) => {
        if (code === 200) {
          if (data) {
            this.sales[0].today = data.todaySalesVolume;
            this.sales[0].yesterday = data.yestodaySalesVolume;
            this.sales[2].today = data.todayMemberNums;
            this.sales[2].yesterday = data.yestodayMemberNums;
            this.sales[3].today = data.todayPayNums;
            this.sales[3].yesterday = data.yestodayPayNums;
          }
        }
      });
      await COUNTMEWS().then(({ code, data }) => {
        if (code === 200) {
          if (data) {
            this.sales[1].today = data.session_cnt;
          }
        }
      });
      await COUNTMEWS_MONTH().then(({ code, data }) => {
        if (code === 200) {
          if (data) {
            this.sales[1].yesterday = data.list[0].visit_pv;
          }
        }
      });
    },
    jupm(s) {
      this.$router.push({ name: "orderAllList", params: { status: s } });
    }
  }
};
</script>

<style lang="scss" scoped>
.content-table {
  padding: 16px;
  background: #fff;
  margin-bottom: 16px;
  .head {
    font-family: PingFangSC-Regular;
    font-size: 20px;
    color: #000000;
    margin-bottom: 10px;
    font-weight: bold;
  }
  .overview-table {
    display: flex;
    flex-wrap: nowrap;
    .borders {
      border-right: 1px solid #e6e7eb;
    }
    .thead {
      width: 50%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 50%;
        text-align: center;
        margin: 10px 0;
        label {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #000000;
        }
        p {
          font-family: Helvetica;
          font-size: 28px;
          color: #5584ff;
          margin: 10px 0;
        }
        div {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #999999;
        }
      }
    }
    .theadT {
      width: 50%;
      box-sizing: border-box;
      padding: 0 60px;
      li {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        border-bottom: 1px solid #e6e7eb;
        margin: 10px 0 20px 0;
        padding-bottom: 10px;
        &:nth-child(4) {
          margin-bottom: 0;
        }
        .imgs {
          width: 50px;
          height: 26px;
          display: inline-block;
          box-sizing: border-box;
        }
        .types {
          display: inline-block;
          width: 78px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          font-size: 14px;
          margin: 0 20px;
        }
        .font {
          line-height: 28px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          width: 60%;
        }
        .btn {
          width: 10%;
          text-align: right;
        }
      }
    }
  }
}
</style>
